<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>html表单</title>
	</head>
	<body>
		<pre>
	 HTML的表单：用于收集不同类型的用户输入     表单是包含表单元素的区域
	 form:定义表单  action：提交的地址  method="get/post" 提交方式
	label:扩大点击的范围
	input：定义表单的内容/元素
			type:定义元素的类型
				text:文本输入框类型
				password:密码输入框类型 （字符不可见）
				checkbox:多选框  label可以使选框与文字捆绑
				radio:单选框 配合name使用 label可以使选框与文字捆绑
				file：上传文件
				number:数字输入框
				submit:提交按钮(默认提交)
				reset:重置数据
				button：按钮
				date:日期选择框
				datetime-local:日期加时间
				image:图片类型 (默认提交)
			
			maxlength：规定用户输入的最大字符长度
			placeholder：提示信息
			value：输入框的预输入值
			checked：规定预选项  checked="checked"   checked   只针对于 type="radio"和type="checkbox"
			disabled：禁用      disabled       disabled ="disabled"
			readonly：只读属性
			name:选框元素的名称 
			autofocus：自动获取焦点   autofocus      autofocus="autofocus"
			required:必填
			size：输入框的可见宽度   默认为20	 
	select:下拉列表
		option:下拉列表项
		{
		  selected：规定预选项   selected    selected="selected"
		  optgroup：定义下拉选项编组  
			label：编组的名称  
		}
		
	button:按钮
	
	textarea：文本域
	  rows:文本框高度
	  cols:文本框宽度
	  {
		  autofocus：自动获取焦点   autofocus      autofocus="autofocus"
		  placeholder：提示信息   
		  readonly：只读属性
		  required：必填项 
		  disabled：禁用
		  maxlength：规定用户输入的最大字符长度
	  }
	fieldset：定义一组相关的表单元素   并且使用外框包起来
	legend：定义fieldset的标题
	
	标签：
	块:form
	行:input label select button textara
		
</pre>

	<fieldset>
		<legend>用户信息表</legend>
		<form action="" method="get">
			姓名：<input type="text" placeholder="请输入用户名" value="刘" maxlength="5" readonly>
			<br>
			<input type="text" autofocus required size="10">
			<br>
			密码：<input type="password" placeholder="请输入密码">
			<br>
			爱好：<label>吃饭<input type="checkbox" checked></label>
			<label>睡觉<input type="checkbox"></label>
			<label>打游戏<input type="checkbox"></label>
			
			<br>
			性别：<label>男<input type="radio" name="sex" checked></label>
			<label>女<input type="radio" name="sex"></label>
			
			<br>
			上传<input type="file">
			<br>
			<input type="submit">
			<input type="reset">
			<input type="button" value="搜索">
			<br>
			日期：<input type="date">
			<br>
			日期加时间：<input type="datetime-local">
			
			<br>
			电话：<input type="number">
			
			<br>
			
			<select>
				<option value="">南京</option>
				<optgroup label="city">
					<option value="">上海</option>
					<option value="">杭州</option>
				</optgroup>
			</select>
			
			<br>
			<button>搜索</button>
			
			<br>
			<textarea style="resize: none;" cols="40" rows="10" maxlength="50" placeholder="请输入您的宝贵意见" readonly></textarea>
			
		</form>
	</fieldset>
		







		<div style="height: 100px;"></div>

	</body>

</html>